<template>
  <view class="comment-page">
    <view class="product-info">
      <image :src="productImage" class="product-image" mode="aspectFit"></image>
      <view class="product-name-container">
        <text class="product-name">{{ productName.length < 60 ? productName : productName.substring(0, 60) }}</text>
        <text class="product-attr" v-if="productAttr">{{ productAttr.length < 60 ? productAttr : productAttr.substring(0, 60) }}</text>
      </view>
    </view>

    <view class="text-area">
      <textarea v-model="text" placeholder="请在此处输入评价" class="input-textarea"></textarea>
    </view>

    <view class="options">
      <view class="option" v-for="(option, index) in options" :key="index" :class="{'selected': selectedOptions.includes(option)}" @click="toggleOption(option)">
        <text>{{ option }}</text>
      </view>
    </view>

    <view class="submit-button">
      <button type="default" @click="submitComment" class="submit-btn">确认提交</button>
    </view>
  </view>
</template>

<script>
import {
  fetchOrderItemDetail
} from '@/api/order.js';
import {
  addProductComment
} from '@/api/productComment.js'

export default {
  data() {
    return {
      text: '',
      options: [
        '商品品质好',
        '性价比高',
        '态度好',
        '价格合理',
        '做工不错',
        '物流时间长',
        '价格优惠低',
        '其他原因'
      ],
      selectedOptions: [],
      productName: '',
      productImage: '',
      orderItemId: null,
      productAttr: '',
      productId: null,
    };
  },
  async onLoad(options) {
    // 获取传递过来的 orderItemId
    this.orderItemId = options.orderItemId;
    // 发送请求获取订单项的数据
    fetchOrderItemDetail(this.orderItemId).then(response => {
      const orderItem = response.data;
      this.productName = orderItem.productName;
      this.productImage = orderItem.productPic;
      this.productAttr = this.formatProductAttr(orderItem.productAttr);
      this.productId = orderItem.productId;
    });
  },
  methods: {
    toggleOption(option) {
      if (this.selectedOptions.includes(option)) {
        this.selectedOptions = this.selectedOptions.filter(cur => cur !== option);
      } else {
        this.selectedOptions.push(option);
      }
    },
    formatProductAttr(jsonAttr) {
      let attrArr = JSON.parse(jsonAttr);
      let attrStr = '';
      for (let attr of attrArr) {
        attrStr += attr.key;
        attrStr += ":";
        attrStr += attr.value;
        attrStr += ";";
      }
      return attrStr;
    },
    submitComment() {
      const selectedOptionsString = this.selectedOptions.join(', ');
      const fullComment = `${this.text}，${selectedOptionsString}`;
      console.log('提交', fullComment, this.productAttr);
      addProductComment(this.productId, fullComment, this.productAttr).then(response => {
        uni.showToast({
          title: response.message,
          duration: 1500
        });
		
      });
    },
  }
};
</script>

<style scoped>
.comment-page {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 10px;
  min-height: calc(100vh - 132px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.product-info {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  position: relative;
}

.product-image {
  width: 200upx;
  height: 200upx;
  border-radius: 8upx;
  margin-right: 20upx;
  position: relative; /* 使 product-attr 的绝对定位相对于 product-image */
}

.product-name-container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
  position: relative;
  max-width: calc(100% - 220upx); /* 确保与图片不重叠 */
}

.product-name {
  font-size: 12px; /* 商品名字的字号 */
  font-weight: 600;
  color: #333;
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
  letter-spacing: 0.5px;
  margin-top: 0; /* 确保与图片顶部对齐 */
}

.product-attr {
  font-size: 12px; /* 商品型号的字号 */
  color: #999; /* 商品型号的颜色 */
/*  position: absolute; */
  bottom: 0;
  left: 0;
  margin-top: 80upx;
}

.text-area {
  width: 100%;
  background: #f2f2f2;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 30px;
}

.input-textarea {
  width: 100%;
  height: 140px;
  font-size: 16px;
  resize: none;
  background: transparent;
  border: none;
  outline: none;
  color: #333;
}

.options {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 30px;
}

.option {
  width: calc(25% - 10px);
  height: 50px;
  background-color: #f2f2f2;
  border-radius: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.option.selected {
  background-color: #ff5a00;
  color: #fff;
  font-weight: bold;
}

.submit-button {
  width: 100%;
  display: flex;
  justify-content: center;
}

.submit-btn {
  width: 80%;
  height: 40px;
  background-color: #ff5a00;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.submit-btn:active {
  background-color: #e04a00;
  transform: scale(0.97);
}
</style>